﻿
var Address = {
    model: function (d = {}) {
        this.Title = d.Title || "地址";
        this.EnTitle = d.EnTitle || "";
        this.Tips = d.Tips || "";
        this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
        this.Value = d.Value || "";
        this.ExportName = d.ExportName || "";
        this.Width = d.Width || "100%";
        this.Level = d.Level || 4;
        this.RequiredLevel = d.RequiredLevel || 4;
        this.Required = d.Required || false;
        this.IsRender = d.IsRender != undefined ? d.IsRender : true;
        this.IsShow = d.IsShow || false;
        this.IsExport = d.IsExport || false;
        this.IsWhere = d.IsWhere || false;
        this.WhereKey = d.WhereKey || "精确匹配"
    },
    component: {
        name: "lg-form-address",
        data: {
            props: {
                items: {
                    type: Array,
                    default: []
                },
                value: {
                    type: [String, Object],
                    default: ""
                },
                data: {
                    type: Object,
                    default: {}
                },
                renderType: {
                    type: Number,
                    default: 0
                }
            },
            data() {
                return {
                    address: [],
                    spliter: " > ",
                    city: [
                        { act: true, data: [] },
                        { act: false, data: [] },
                        { act: false, data: [] }
                    ]
                }
            },
            watch: {
                address: {
                    handler: function (newVal, oldVal) {
                        var value = this.address.filter(p => p).join(this.spliter);
                        this.$emit('update:value', value)
                    },
                    deep: true
                }
            },
            computed: {
                area: function () {
                    var arr = [];
                    for (let i = 0; i < 3; i++) {
                        if (this.address[i]) {
                            arr.push(this.address[i])
                        }
                    }
                    return arr.join(this.spliter)
                }
            },
            mounted: function () {
                var level = this.data.Level
                var val = this.value;
                var arr = [];
                if (val) {
                    arr = val.split(this.spliter)
                }
                for (let i = 0; i < level; i++) {
                    if (arr[i]) {
                        this.address.push(arr[i]);
                    } else {
                        this.address.push("");
                    }
                }
                this.city[0].data = this.getCity();
            },
            methods: {
                getCity: function (psn) {
                    if (psn) {
                        return cnCity.filter(p => p.PSN == psn)
                    } else {
                        return cnCity.filter(p => p.Depth == 1)
                    }
                },
                onSelect: function (index, city) {
                    var level = this.data.Level > 3 ? 3 : this.data.Level;
                    var isLast = index == level - 1;
                    //将当前选中值赋给address用于data.Value取值
                    this.address[index] = city.Description;
                    this.city[index].act = true;
                    for (let i = 0; i < level; i++) {
                        //将大于当前索引的地下赋空值，逻辑上当点击当前分类的时候，将下一级取消赋值
                        if (i > index) {
                            this.address[i] = "";
                            this.city[i].data = [];
                        }
                        if (i != index) {
                            this.city[i].act = false;
                        }
                    }
                    if (!isLast) {
                        this.city[index + 1].data = this.getCity(city.SN)
                    }
                },
                cancel: function () {
                    for (let i in this.address) {
                        this.address[i] = "";
                    }
                    this.$refs.dressBox.style.display = "none";
                    this.city[1].data = [];
                    this.city[2].data = [];
                },
                ok: function () {
                    this.$refs.dressBox.style.display = "none";
                }
            },
            template: `
             <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
               <div class="lg-form-block">
                 <div class="lg-form-title">
                    <div class="lg-form-title-item">
                        <i v-if="data.Required">*</i>
			            <span class="cn">{{data.Title}}</span>
                        <span class="en">{{data.EnTitle}}</span>
			         </div>
                 </div>
                 <div class="lg-form-control">
                    <div class="lg-form-select">
                        <div class="lg-select-title">
                            <input type="text" readonly class="lg-input lg-input-text" :value="area" />
                            <label class="fa fa-angle-down" for="dress"></label>
                        </div>
                        <div class="lg-relation-input lg-dress-full" v-if="data.Level==4">
                             <textarea rows="3" class="lg-textarea" placeholder="详细地址"  v-model="address[3]"></textarea>
                        </div>
                        <div class="lg-select-list-position lg-select-position" ref="dressBox" style="display:none">
                             <div class="lg-dress-select">
                                 <div class="lg-dress-btn">
                                    <span v-on:click="cancel()">取消</span><span v-on:click="ok()">确认</span>
                                 </div>
                                  <div class="lg-dress-list">
                                      <div v-for="(item,index) in city" :class="['lg-dress-depth',{'act':item.act}]" :key="'city'+index">
                                          <ul>
                                              <li v-for="c in item.data" v-on:click="onSelect(index,c)" :class="{'selected':c.Description==address[index]}">
                                                  <span class="txt">{{c.Description}}</span><span class="fa fa-angle-right"></span>
                                              </li>
                                          </ul>
                                       </div>
                                   </div>
                               </div>
                           </div>
                     </div>
                  </div>
               </div>
               <div class="lg-form-block">
                  <div class="lg-form-tip"><p>{{data.Tips}}</p></div>
			      <div class="lg-form-ver" v-if="data.error">{{data.errMsg}}</div>
               </div>
             </div>
            `
        }
    }
}

Address.model.prototype.verify = function () {
    var required = lg.regx.required(this.Value);
    if (this.Required && !required) {
        return { state: false, msg: "必填项不可为空!" };
    }
    if (required) {
        var arr = this.Value.split(" > ");
        if (arr.length != this.Level) {
            return { state: false, msg: "请填写完整！" };
        }
    }
    return { state: true, msg: "" };
}

export { Address }